<template>
  <div>
    <!-- 数据查询 -->
    <div class="filter-container">
      <el-input
          placeholder="请输入申请人"
          prefix-icon="el-icon-search"
          v-model="listQuery.name"
          @input = "getData()"
          >
      </el-input>
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        fixed
        width="50">
      </el-table-column>

      <el-table-column
        prop="account"
        fixed
        label="申请人"
        width="180">
      </el-table-column>

      <el-table-column
        prop="created"
        sortable
        label="申请时间">
        <template slot-scope="{row}">
          <span>{{row.created | getDate }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="app_type"
        label="申请类别"
        :filters="[{text:'办公审批',value:1},{text:'差旅审批',value:2},{text:'请假审批',value:3}]"
        :filter-method="filterHandler">
        <template slot-scope="{row}">
          <el-tag :type="row.app_type | applyCategoryStyle">{{row.app_type | applyCategory}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="250">
        <template slot-scope="{row}">
          <el-button
            size="mini"
            type="success"
            @click="handleSubmit(row,'通过')" :disabled="row.result=='pass' || row.result=='reject'">通过</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleSubmit(row,'驳回')" :disabled="row.result=='pass' || row.result=='reject'">驳回</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 弹框 -->
    <el-dialog :title="`审批流程-一审-${passOrRejectText}`" :visible.sync="dialogVisible">
      <p>确定{{passOrRejectText}}？</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :type="passOrRejectText=='通过'?'success':'danger'" @click="apply()">{{passOrRejectText}}</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <my-pagination v-show="rows>0"
      :total ="rows"
      :page.sync ="listQuery.pageNo"
      :pageSize.sync ="listQuery.pageSize"
      @change = "getData"/>
  </div>
</template>

<script>
import {oneList,onePass,oneReject} from '@/api/http'
export default {
  data(){
    return {
      tableData:[], //表格数据
      rows:1, //总数目
      listQuery:{
        pageNo:1,
        pageSize:10,
        name:''
      },
      temp:{}, //暂存数据
      dialogVisible:false, //弹框的状态
      passOrRejectText:'通过', //通过或驳回标签
    }
  },
  mounted(){
    this.getData();
  },
  methods:{
    getData(){
      oneList(this.listQuery).then(res=>{
        let {code,data} = res.data;
        if(code == 20000) {
          this.tableData = data.list;
          this.rows = data.rows; //总数目
        }
      })
    },
    //筛选
    filterHandler(value, row, column) {
      //console.log(column);
      const property = column['property'];
      return row[property] === value;
    },

    //通过&驳回弹框
    handleSubmit(row,text){
      this.temp = {...row};
      this.passOrRejectText = text;
      this.dialogVisible = true;//弹框的状态
    },
    //提交通过&驳回
    apply(){
      let {id,app_id,app_type} = this.temp;
      if(this.passOrRejectText =='通过'){
        onePass({id,app_id,app_type}).then(res=>{
          let {code,data} = res.data;
          if(code == 20000){
            this.getData(); //查询数据
            this.$notify({
              title: '通过',
              message: '通过成功',
              duration: 2000,
              type: 'success'
            });
          }
        })
      }else {
        oneReject({id,app_id,app_type}).then(res=>{
          let {code,data} = res.data;
          if(code == 20000){
            this.getData(); //查询数据
            this.$notify({
              title: '驳回',
              message: '驳回成功',
              duration: 2000,
              type: 'success'
            });
          }
        })
      };
      this.dialogVisible = false;//弹框的状态
    }
  }
}
</script>


